<!--
/**
* Author: gaohui
* Date: 2023-02-28 15:07
* Desc: RefComp 赋值及值修改
*/
-->

<template>
  <title-line title="赋值及值修改" />
  <div class="mb20">字符串：{{ str }}</div>
  <div>
    <el-button @click.stop="handleUpdate">修改原始值</el-button>
    <el-button @click.stop="handleReset">还原初始值</el-button>
  </div>
</template>

<script name="RefComp" lang="ts" setup>
import { ref } from "vue";

// 使用ref定义变量，基于ts,以下代码会类型断言为 const str = ref<string>("hello world");
const str = ref("hello world");

// 无需响应式的变量无需使用ref定义
const strOrigin = "hello world";

// 修改
const handleUpdate = () => {
  str.value = "Do you really like Front-end job?";
};

// 重置
const handleReset = () => {
  str.value = strOrigin;
};
</script>
<style lang="scss" scoped></style>
